<template>
	<view class="Header-box" :class="{xcx: statusBarHeight, common: !statusBarHeight}"
		:style="{paddingBottom: `${statusBarHeight}px`}">
		<view class="header-fixed-box" :style="{
                background: showBackground ? showBackground : 'white',
				height: `${statusBarHeight}px`
            }">
			<view class="header-main-box" :style="{height: `${statusBarHeight}px`}">
				<view v-if="isShowLogo">
					<view class="header-logo" :style="{paddingTop:`${paddingHeight}px`}">
						<image src="../../static/logo.svg" mode="scaleToFill" style="height: 36px;width:36px;" />
						<span style="margin-left: 5px;font-size: 20px; font-weight:blod ; color:#2E4964">吃巧</span>
						<span style="font-size: 20px; font-weight:blod;color:#8292A2">AI营养师</span>
					</view>
				</view>
				<view v-else>
					<view v-if="!noLeft" class="header-left-box header-operation"
						:style="{paddingTop:`${paddingHeight}px`}">
						<uni-icons type="arrow-left" color="#1abc9c" size="20" @click="back()"></uni-icons>
					</view>
					<view class="header-title"
						:style="{fontSize:`${titleFontSize}rpx`,paddingTop:`${paddingHeight}px`,
						'justify-content': textLeft?'flex-start':'center',color:titlecolor?titlecolor:'#2e4964'}">
						{{ pageTitle }}
					</view>
					<view @click="headerRightClick"
						:style="{paddingRight:rightPadding?rightPadding:'',color:rightColor?rightColor:''}"
						class="header-right-box header-operation">{{ rightText }}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			// 右侧文字
			rightText: {
				default: "",
			},
			// 是否有背景色
			showBackground: {
				default: false,
			},
			//是否有标题颜色
			titlecolor: {
				default: false,
			},
			//标题字体大小
			titleFontSize: {
				default: 32
			},
			//是否有白色左侧箭头
			whiteback: {
				default: true,
			},
			// 是否没有返回
			isShowLogo: {
				default: false
			},
			noLeft: {
				default: true,
			},
			leftType: {
				default: 1, //1为redirectTo,2为navigateBack，3为switchTab
			},
			leftUrl: {
				default: "/pages/index/index"
			},
			showTitle: {
				default: " ",
			},
			// 右侧padding
			rightPadding: {
				default: false
			},
			rightColor: {
				default: false
			},
			textLeft: {
				default: false
			}
		},
		data() {
			return {
				pageTitle: "",
				// 微信小程序的胶囊的高度
				statusBarHeight: "",
				paddingHeight: "",
			};
		},
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
				success: res => {
					this.statusBarHeight = (res.statusBarHeight + (custom.top - res.statusBarHeight)) +
						custom.height + 10
					//传入的fontSize为rpx值,转为px除以2,再去除一半除以
					this.paddingHeight = ((res.statusBarHeight + (custom.top - res.statusBarHeight)) * 2 +
						custom.height) / 2 - this.titleFontSize / 2 / 2 - 2
				}
			});
			// #endif
		},
		created() {},
		mounted() {
			if (this.showTitle != "") {
				this.pageTitle = this.showTitle
			} else {
				this.pageTitle = this.$Route.style.navigationBarTitleText;
			}
		},
		methods: {
			back() {
				if (this.leftType == 1) {
					uni.redirectTo({
						url: this.leftUrl,
					})
				} else if (this.leftType == 2) {
					uni.navigateBack({
					delta: 1,
					fail(res) {
						console.log(res)
					}
				});
				} else {
					uni.switchTab({
						url: this.leftUrl,
					});
				}
			},
			headerRightClick() {
				// 组件绑定click事件
				this.$emit("rightClick");
			},
			headerLeftClick() {
				uni.navigateBack({});
				uni.setStorageSync("changeActive", 0)
			},

			// 更换标题
			changeTitle(title) {
				console.log(title);
				this.pageTitle = title;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.Header-box {
		position: relative;

		// 常见样式
		&.common {
			padding-bottom: 50px;
			padding-bottom: calc(constant(safe-area-inset-top) + 50px);
			padding-bottom: calc(env(safe-area-inset-top) + 50px);

			.header-fixed-box {
				height: 50px;
				height: calc(constant(safe-area-inset-top) + 50px);
				height: calc(env(safe-area-inset-top) + 50px);

				.header-main-box {
					height: calc(50px - constant(safe-area-inset-top));
					height: calc(50px - env(safe-area-inset-top));
					height: 50px;
				}
			}
		}

		// 小程序样式
		&.xcx {}

		.header-fixed-box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 199;
			background: rgba(255, 255, 255, 0);

			.header-main-box {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				color: white;
				box-sizing: border-box;

				.header-title {
					color: #fff;
					width: 70%;
					margin: 0 auto;
					display: flex;
					align-items: flex-start;
					justify-content: center;
					font-weight: 700;
				}
				.header-logo{
					margin-top: -7px;
					padding-left: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					white-space: nowrap;
				}
				.header-operation {
					display: flex;
					justify-content: center;
					align-items: flex-start;
					// height: 100%;
					width: 15%;
					position: absolute;
					// bottom: 0;
					white-space: nowrap;
					color: #333 !important;
					cursor: pointer;

					.header-left-back {
						width: 17px;
					}

					&.header-left-box {
						left: 0;
					}

					&.header-right-box {
						right: 0;
						width: auto;
					}
				}
			}
		}
	}
</style>